@CHARSET "UTF-8";
*{                          /* 清除浏览器部分默认样式  */
	margin: 0;
	padding: 0;
	list-style:none;
}
body{                       /* 设置整体背景颜色  */
	background: -webkit-linear-gradient(to right,rgb(22,18,31), rgb(58,46,72),rgb(22,18,31)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(to right,rgb(22,18,31), rgb(58,46,72),rgb(22,18,31)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(to right,rgb(22,18,31), rgb(58,46,72),rgb(22,18,31)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,rgb(22,18,31), rgb(58,46,72),rgb(22,18,31)); /* 标准的语法,必须放最后 */
}
.box{                       /* 设置主体部分样式  */
	width: 500px;
	height:360px;
	border-radius:7px;
	margin: 20px auto;
	position:relative;
	overflow:hidden;
	font-family: 楷体;
	border: 1px solid rgba(255,255,255,0.5);
}
.box::after{
	display: block;
	clear:both;
	content:"";		
}
.box .mytitle{              /* 设置主体中的标题的样式   */
	width: 100%;
	height: 8%;
	background: transparent;
	color: rgba(192,187,191,1);
	text-align: center;
	line-height: 30px;
	font-weight: bold;
	letter-spacing: 4px;
}
.box ul{                   /*设置职工聊天对象的列表*/
	width:20%;
	height:92%;
	float: left;
	text-align:center;
	position:relative;
	overflow: auto;
	color: rgba(192,187,191,0.7);
}
.box ul .noUser{
	width: 30px;
	margin: 100% auto;
	font-size:16px;
}
.box ul li{
	padding: 5px 0;
	cursor:pointer;  /* 将鼠标指针放到对象上面会变成小手的形状 */
}
.box ul li:hover{
	background: radial-gradient(circle ,rgb(235,207,255) 50%,#fff);
	color: black;
}
.box .getmess{
	width: 80%;
	height: 92%;
	text-align:center;
	float:right;
	position: relative;
}
.box .getmess .show{
	line-height: 300px;
}

.box .talkText{            /* 设置聊天内容显示样式 */
	width: 100%;
	height: 85%;
	background: rgba(214,214,214,0.8);
	overflow: auto;
	position:relative;
	display: none;
}
.box .inText{              /* 设置用户输入区域 */
	width: 100%;
	height: 15%;
	display: none;
	background:white;
}
.box .inText textarea{     /* 设置用户输入文本样式 */
	width: 80%;
	height:100%;
	text-align: left;
	line-height: normal;
	font-family: 宋体;
	font-size: 15px;
	border: 0px;
	float: left;
	text-ident: 1em;
	padding: 5px;
}
.box .inText input {       /* 设置用户发送消息的按钮样式 */ 
	width: 10%;
	height:55%;
	background:radial-gradient(circle ,rgb(35,207,255) 50%,#fff);
	text-align: center;
	line-height: 100%;
	font-family: 宋体;
	float: left;
	margin: 10px 20px;
	border-radius: 5px;
	border: 1px solid blue;
}
.box .inText input:hover { /* 设置鼠标经过时发送按钮的背景颜色 */
	background:red;
} 
.box .talkText .zjMess{    /*设置每发送一次消息的整体位置 */
	margin: 5px;
	padding:5px;
	width: 95%;
}

.box .talkText .zjMess::after{   /* 处理浮动造成的高度塌陷的问题(即父元素无法包裹住子元素)，这父类的三种属性设置也是固定的 */
    display: block;
    clear:both;
    content:"";
}

.box .talkText .zj{      /* 用户发送消息的内容样式 */
	border:1px solid blue;
	background: rgba(214,22,12,0.3);
	border-radius:5px;
	display: inline-block;
	padding: 5px;
	float:right;
}

.box .talkText .zj::after{   /* 处理浮动造成的高度塌陷的问题(即父元素无法包裹住子元素)，这父类的三种属性设置也是固定的 */
    display: block;
    clear:both;
    content:"";
}

.box .talkText .zjImg{   /* 用户发送消息的身份内容样式 */
	width: 25px;            /* 设置用户身份宽度 */
	height:25px;            /* 设置用户身份高度 */
	border:1px solid blue;  /* 设置用户身份边框 */
	border-radius:50%;      /* 设置用户身份边框的圆角 */
	font-size:7px;          /* 设置用户身份字体大小 */
	text-align:center;      /* 字体横向居中 */
	line-height: 25px;      /* 字体纵向居中 */
	font-weight:bold;       /* 字体加粗 */
	display: inline-block;  /* 设置身份元素为可以与消息元素在同一行（拥有块级元素的功能） */
	float:right;            /* 设置右浮动 */
	position:relative;      /* 设置位置相对于自己 */
	top:3px;                /* 设置位置相对于自己向下微调3像素,达到居中的效果 */
	margin-left:5px;
}

.box .talkText .kf{      /* 客服发送消息的内容样式 */
	border:1px solid blue;
	background: rgba(214,22,12,0.3);
	border-radius:5px;
	display: inline-block;
	padding: 5px;
	float:left;
}

.box .talkText .kfImg{   /* 客服发送消息的身份内容样式 */
	width: 25px;            /* 设置用户身份宽度 */
	height:25px;            /* 设置用户身份高度 */
	border:1px solid blue;  /* 设置用户身份边框 */
	border-radius:50%;      /* 设置用户身份边框的圆角 */
	font-size:7px;          /* 设置用户身份字体大小 */
	text-align:center;      /* 字体横向居中 */
	line-height: 25px;      /* 字体纵向居中 */
	font-weight:bold;       /* 字体加粗 */
	display: inline-block;  /* 设置身份元素为可以与消息元素在同一行（拥有块级元素的功能） */
	float:left;             /* 设置右浮动 */
	position:relative;      /* 设置位置相对于自己 */
	top:3px;                /* 设置位置相对于自己向下微调3像素,达到居中的效果 */
	margin-left:5px;
}